<template>

    <div>
        <a-row>
            <a-row class='mytitle'>
                {{ $t('集群接入平台') }}
            </a-row>
            <NoAuthPage v-showNoAuth="'H1-1'" :imgBoxStyle="{ height: '85vh', margin: '10px' }" />
            <a-card size="small" :title="$t('本地集群') + $t('信息')" style="margin: 12px; color: black;"
                :headStyle="{ color: 'black' }">
                <span slot="extra" style="color: #006DB8;" @click="handleSetting">
                    <Iconfont class="icon net-card-icon" type="icon-setting16f"></Iconfont>
                    {{ $t('Set') }}
                </span>
                <span>{{ $t('本地集群') + $t('名称') }}：<span>{{ cluster_name }}</span></span>
            </a-card>
            <a-row v-userAuth="'H1-1'" style="margin:1em">
                <a-card size="small" :title="$t('远端集群') + $t('信息')" :headStyle="{ color: 'black' }">
                    <div>
                        <a-button type='primary' @click="handleCreate">
                            <Iconfont class="icon button-icon-style" type="icon-new16f"></Iconfont>{{ $t('添加远端集群') }}
                        </a-button>
                        <a-button class="ml-6" @click="handleUpdate">
                            <Iconfont class="icon net-card-icon" type="icon-rollback16f1"></Iconfont>
                        </a-button>
                        <a-input v-model="input" :placeholder="$t('Enter')" style="width: 180px; margin-left: 6px;" />
                        <a-button type='primary' class="ml-8" @click="handleSearch">
                            <Iconfont class="icon button-icon-style" type="icon-search16f"></Iconfont>
                            {{ $t('查询') }}
                        </a-button>
                    </div>

                    <a-table class="bigstyle mt-16" rowKey="remote_cluster_name" :columns='columns'
                        :loading="loading" :dataSource='dataList' :locale="defaultSetting"
                        :pagination='pagination' size='small' :scroll="{ x: 1200 }">

                        <!-- 名称 -->
                        <template slot="remote_cluster_name" slot-scope="text, record">
                            <span style="color: #006DB8;">{{ record.remote_cluster_name }}</span>
                        </template>
                        <!-- 状态 -->
                        <template slot="status" slot-scope="text, record">
                            <span v-if="record.status == 1" class="red-circle"></span>
                            <a-tooltip v-if="record.status == 1" placement='top'>
                                <template slot="title">
                                    <span>{{ record.description }}</span>
                                </template>
                                <span>{{ statusMap.get(record.status) }}</span>
                                <Iconfont class="icon ml-2" type="icon-exclaim64f"></Iconfont>
                            </a-tooltip>
                            <span v-else-if="record.status == 0">
                                <span class="green-circle"></span>
                                <span>{{ statusMap.get(record.status) }}</span>
                            </span>

                        </template>
                        <template slot="function" slot-scope="text, record">
                            <span v-if="record.function != null">{{ functionMap.get(record.function) }}</span>
                            <span v-else>-</span>
                        </template>
                        <template slot="operate" slot-scope='text, record'>
                            <div style="display: flex;" v-userAuth="'H1-2'">
                                <a-tooltip placement='top'>
                                    <template slot='title'>
                                        <span>{{ $t('Edit') }}</span>
                                    </template>
                                    <Iconfont class="icon table-operation-icon" type="icon-edit16f"
                                        @click="handleEdit(record)">
                                    </Iconfont>
                                </a-tooltip>
                                <a-tooltip placement='top'>
                                    <template slot='title'>
                                        <span>{{ $t('Delete') }}</span>
                                    </template>
                                    <Iconfont class="icon table-operation-icon" type="icon-delete16f"
                                        @click="handleDelete(record.remote_cluster_name, record.id)">
                                    </Iconfont>
                                </a-tooltip>
                            </div>
                        </template>
                    </a-table>
                </a-card>
            </a-row>
        </a-row>

        <CreateAccess ref="accessDialog" @get-list="getList" />
        <ModifyAccess ref="accessmodify" @get-list="getList" />
        <ModifyLocalAccess ref="localModify" @get-list="handleName" />
    </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import CreateAccess from './clusterAccess/createAccess.vue';
import NoAuthPage from '@/components/common/NoAuthPage'
import ModifyAccess from './clusterAccess/modifyAccess.vue';
import ModifyLocalAccess from './clusterAccess/modifyLocalAccess.vue';
import { decrypt } from '../../untils/aes';

export default {
    name: 'blockStorage',
    components: { EmptyData, CreateAccess, ModifyAccess, ModifyLocalAccess, NoAuthPage },
    data() {
        return {
            loading: false,
            cluster_name: '',
            dataList: [],
            strategyOption: [],
            copyList: [],
            defaultSetting: { emptyText: <EmptyData /> },
            pagination: {
                defaultPageSize: 10,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '30', '40', '50', '100', ],
                // pageSizeOptions: ['10', '20', '30', '40', '50', '100', '0'],
                onChange: this.onPageChange,
                onShowSizeChange: this.handlePageChange,
                buildOptionText: (props) => {
                    let text
                    if (props.value == '0') text = '全部' 
                    else text = `${props.value} / ${this.$t('page')}`
                    return text
                }
                // (props) => `${props.value} / ${this.$t('page')}`
            },
            columns: [
                { title: this.$t('集群名称'), dataIndex: 'remote_cluster_name', key: 'remote_cluster_name', width: 150, fixed: 'left', scopedSlots: { customRender: 'remote_cluster_name' } },
                { title: this.$t('远端集群ID'), dataIndex: 'remote_cluster_id', key: 'remote_cluster_id', width: 180 },
                { title: this.$t('PentaStor版本'), dataIndex: 'remote_manager_ver', key: 'remote_manager_ver', width: 150 },
                { title: this.$t('关联功能'), dataIndex: 'function', key: 'function', width: 150, scopedSlots: { customRender: 'function' } },
                { title: this.$t('访问URL'), dataIndex: 'remote_cluster_url', key: 'remote_cluster_url' },
                { title: this.$t('连接状态'), dataIndex: 'status', key: '"status', scopedSlots: { customRender: 'status' } },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 160, fixed: 'right' }
            ],

            statusMap: new Map([
                [0, '正常'],
                [1, '异常']
            ]),
            functionMap: new Map([
                [0, '未关联'],
                [1, '快照复制']
            ]),

            // rowSelection: {
            //     onChange: (selectedRowKeys, selectedRows) => {
            //         console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            //     },
            //     onSelect: (record, selected, selectedRows) => {
            //         console.log(record, selected, selectedRows);
            //     },
            //     onSelectAll: (selected, selectedRows, changeRows) => {
            //         console.log(selected, selectedRows, changeRows);
            //     },
            // },
            input: '',
        }
    },
    mounted() {
        this.getList()
        this.handleName()
    },
    methods: {
        async getList() {
            this.loading = true
            const { data } = await this.$api.systemSettings.getClusterListApi()
            this.dataList = data.cluster_info
            this.copyList = data.cluster_info
            this.loading = false
        },
        async handlePageChange(current, pageSize) {
            if (pageSize === 0) pageSize = 200
            this.pageSize = pageSize
        },
        async onPageChange(page, pageSize){
            console.log('changepage', page, "changesize", pageSize)
        },
        handleSearch() {
            this.loading = true
            const list = []; // 用于存放搜索出来数据的新数组
            if (this.input) {
                this.copyList.filter((item) => {
                    if (item.remote_cluster_name.indexOf(this.input) !== -1) {
                        list.push(item);
                    }
                });
                this.dataList = list;
            } else {
                this.dataList = this.copyList
            }
            this.loading = false
        },
        async handleName() {
            const { data } = await this.$api.systemSettings.getClusterNameApi()
            this.cluster_name = data.cluster_name
        },
        async handleUpdate() {
            const { data } = await this.$api.systemSettings.getclusterStatusApi()
            await this.getList()
        },
        handleCreate() {
            this.$refs.accessDialog.isShow = true
        },
        async handleEdit(item) {
            this.$refs.accessmodify.isShow = true
            this.$refs.accessmodify.form.remote_cluster_user = item.remote_cluster_user
            this.$refs.accessmodify.form.remote_cluster_passwd = decrypt(item.remote_cluster_passwd)
            this.$refs.accessmodify.form.remote_cluster_http = item.remote_cluster_url.split(':')[0] + '://'
            this.$refs.accessmodify.form.remote_cluster_url = item.remote_cluster_url.split('//')[1]
        },
        async handleSetting() {
            this.$refs.localModify.form.cluster_name = this.cluster_name
            this.$refs.localModify.isShow = true
        },
        async handleDelete(remote_cluster_name, id) {
            this.loading = true
            let _this = this
            this.$confirm({
                title: this.$t('Delete') + this.$t('远端集群'),
                content: this.$t('Delete') + this.$t('远端集群') + `${remote_cluster_name}` + this.$t('后，将无法恢复！您确定要删除吗？'),
                cancelText: this.$t('Cancel'),
                okText: this.$t('Sure'),
                okType: 'danger',
                icon: 'close-circle',
                async onOk() {
                    const { data } = await _this.$api.systemSettings.deleteClusterApi(id)
                    _this.model(data.id) //返回模板
                    _this.notice(data.id, data.params, data.flag) //通知列表显示
                    if (data.flag == '0') _this.getList()
                },
                onCancel() {
                }
            })
            this.loading = false
        },

    }
}
</script>
